<script setup lang="ts">
import type { Dict } from '@croco/framework/types';

import { onBeforeMount, reactive, ref } from 'vue';

import { useAccess } from '@croco/framework/access';
import { VIcon } from '@croco/framework/icons';
import { Page } from '@croco/framework/libraries';

import { getDictTrim, getMenuModule } from '#/api';

import LoginLog from './login/index.vue';
import OperationLog from './operation/index.vue';

defineOptions({ name: 'SystemLog' });

const { hasPermission } = useAccess();

interface TabPaneProps {
    icon: string;
    title: string;
}

const active = ref('none');
const enums = reactive<{
    status: Array<Dict> | undefined;
    title: Array<any> | undefined;
    type: Array<Dict> | undefined;
}>({
    type: undefined,
    title: undefined,
    status: undefined,
});
const shortcuts = [
    {
        text: '昨天',
        value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24);
            return [start, end];
        },
    },
    {
        text: '最近三天',
        value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
            return [start, end];
        },
    },
    {
        text: '最近一周',
        value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            return [start, end];
        },
    },
    {
        text: '最近一个月',
        value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            return [start, end];
        },
    },
    {
        text: '最近三个月',
        value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            return [start, end];
        },
    },
];

const operationLogPermission = hasPermission('system:operation:log:list') as TabPaneProps;
const loginLogPermission = hasPermission('system:login:log:list') as TabPaneProps;
const runLogPermission = hasPermission('system:run:log:list') as TabPaneProps;
if (runLogPermission) active.value = 'run';
if (loginLogPermission) active.value = 'login';
if (operationLogPermission) active.value = 'operation';

onBeforeMount(() => {
    // 获取字典数据
    Promise.all([getMenuModule(), getDictTrim(['sys_oper_type', 'sys_common_status'])]).then((rs) => {
        enums.title = rs[0].data;
        enums.type = rs[1][0] ?? [];
        enums.status = rs[1][1] ?? [];
    });
});
</script>

<template>
    <Page auto-content-height>
        <el-tabs v-model="active" class="kt-tabs" type="border-card">
            <el-tab-pane v-if="operationLogPermission" name="operation">
                <template #label>
                    <span class="log-tabs-label">
                        <VIcon :icon="operationLogPermission.icon" />
                        <span>{{ operationLogPermission.title }}</span>
                    </span>
                </template>
                <OperationLog v-if="active === 'operation'" :enums :shortcuts />
            </el-tab-pane>
            <el-tab-pane v-if="loginLogPermission" name="login">
                <template #label>
                    <span class="log-tabs-label">
                        <VIcon :icon="loginLogPermission.icon" />
                        <span>{{ loginLogPermission.title }}</span>
                    </span>
                </template>
                <LoginLog v-if="active === 'login'" :enums :shortcuts />
            </el-tab-pane>
            <el-tab-pane v-if="runLogPermission" name="run">
                <template #label>
                    <span class="log-tabs-label">
                        <VIcon :icon="runLogPermission.icon" />
                        <span>{{ runLogPermission.title }}</span>
                    </span>
                </template>
            </el-tab-pane>
        </el-tabs>
    </Page>
</template>

<style lang="scss" scoped>
.kt-tabs .log-tabs-label {
    display: flex;
    align-items: center;

    span {
        margin-left: 4px;
    }
}
</style>
